<template>
    <view class="work-container">
        <!-- 顶部用户信息 -->
        <uni-section title="基础信息" type="line">
            <uni-list>
                <uni-list-item title="用户编码：" v-bind:rightText="userArchives.userCode" />
            </uni-list>
            <uni-list>
                <uni-list-item title="用户名称：" v-bind:rightText="userArchives.userName" />
            </uni-list>
            <uni-list>
                <uni-list-item title="建议书状态：" v-bind:rightText="formatDictData(actionStatus,sgAction.actionStatus)" />
            </uni-list>
            <uni-list>
                <uni-list-item title="报备状态：" v-bind:rightText="formatDictData(reportStatus,sgAction.reportStatus)" />
            </uni-list>
        </uni-section>
        <!-- 操作按钮列表 -->
        <uni-section title="业务操作" type="line">
            <view class="btn-body box">
                <button class="button" @click="addProject"><text class="button-text">添加项目</text></button>
                <button class="button" @click="exportPrint"><text class="button-text">导出打印</text></button>
                <button class="button" @click="uploadSignature"><text class="button-text">客户签收</text></button>
                <button class="button" @click="reportRecord"><text class="button-text">报备记录</text></button>
			</view>
        </uni-section>
        <uni-section title="巡检记录" type="line">
            <block v-for="(item, index) in records" :key="index">
                <uni-card v-bind:title="formatDictData(checkScopeDatas,item.sgPlanItems.checkScope)" v-bind:sub-title="formatDictData(checkContentDatas,item.sgPlanItems.checkContent)" v-bind:extra="item.createTime" :thumbnail="getPicUrl(item.itemPhotoBefore)">
                    <uni-list>
                        <uni-list-item title="【检查项目】" :note="item.sgPlanItems.checkItem"></uni-list-item>
                        <uni-list-item title="【存在问题】" :note="item.itemQuestion"></uni-list-item>
                    </uni-list>
                    <view slot="actions" class="card-actions no-border button-group">
                        <button type="info" size="mini" plain="true" @click="showPicture(item)">查看照片</button>
                        <button type="warn" size="mini" plain="true" @click="delRecord(item)">删除记录</button>
                    </view>
                </uni-card>
            </block>
        </uni-section>
    </view>
</template>

<script setup>
import { getDictDatas } from '@/api/system/dict/data';
import { getCheckTaskDetail } from '@/api/task/task';
import { listCheckRecords,delCheckRecord } from '@/api/task/record';

export default {
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 100
            },
            actionStatus:[],
            reportStatus:[],
            checkScopeDatas:[],
            checkContentDatas:[],
            actionPictures: [],
            userArchives: {},
            sgAction: {},
            sgCheckPlan: {},
            records: [],
            total: 0,
            loadingStatus: 'more',
            scrollTop: 0
        };
    },
    onLoad(options) {
        this.loadDictData();
        if (options.planId && options.planArchiveId) {
            this.getCheckTask(options.planId, options.planArchiveId);
        }
    },
    methods: {
        async loadDictData() {
            getDictDatas('sg_action_status').then(res => {
                this.actionStatus = res.rows;
            });
            getDictDatas('sg_action_report').then(res => {
                this.reportStatus = res.rows;
            });
            getDictDatas('sg_check_scope').then(res => { 
                this.checkScopeDatas = res.rows;
            });
            getDictDatas('sg_check_content').then(res => { 
                this.checkContentDatas = res.rows;
            });
        },
        // 加载巡检记录
        getCheckTask(planId, planArchiveId) {
            getCheckTaskDetail(planId, planArchiveId)
                .then(res => {
                    this.userArchives = res.userArchives;
                    this.sgAction = res.sgAction;
                    this.sgCheckPlan = res.sgCheckPlan;

                    this.loadRecords(this.sgAction.actionId);
                })
                .catch(error => {
                    console.error('加载记录失败:', error);
                    uni.showToast({ title: '加载记录失败', icon: 'none' })
                }
                );
        },
        formatDictData(dict, value) {
            if (!dict || !value) return '';
            return dict.find(item => item.dictValue === value).dictLabel;
        },

        getPicUrl(picUrl) {
            if (!picUrl) return '图片未上传';
            //图片地址以,分割，返回第一个图片地址
            picUrl = picUrl.split(',')[0];
            return 'http://localhost:8800' + picUrl;
        },

        showPicture(item) {
            let pics = [];
            pics = item.itemPhotoBefore.split(',').map(pic => 'http://localhost:8800' + pic);
            uni.previewImage({
                urls: pics,
                current: 0
            });
        },

        delRecord(item) {
            uni.showModal({
                title: '提示',
                content: '确定要删除该巡检记录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // TODO: 删除巡检记录
                        // uni.showToast({ title: '删除记录暂未实现', icon: 'none' });
                        delCheckRecord(item.id).then(res => {
                            this.loadRecords(this.sgAction.actionId);
                        }).catch(error => {
                            console.error('删除记录失败:', error);
                            uni.showToast({ title: '删除记录失败', icon: 'none' })
                        }
                        );
                    }
                }
            });
        },
        // 加载巡检记录
        loadRecords(actionId) {
            // 根据actionId加载巡检记录
            listCheckRecords(actionId).then(res => {
                this.records = res.rows;
                this.total = res.total;
            }).catch(error => {
                    console.error('加载巡检记录失败:', error);
                    uni.showToast({ title: '加载记录失败', icon: 'none' })
                }
            );
        },

        // 添加项目
        addProject() {
            this.$tab.navigateTo('/pages/work/task/record-add?actionId=' + this.sgAction.actionId);
        },

        // 导出打印
        exportPrint() {
            uni.showToast({ title: '导出打印暂未实现', icon: 'none' });
        },

        // 客户签收上传
        uploadSignature() {
            uni.navigateTo({
            url: `/pages/work/task/upload-signature`
            });
        },

        // 报备记录
        reportRecord() {
            uni.navigateTo({
            url: `/pages/work/task/report-record`
            });
        }
    }
};
</script>

<style lang="scss" scoped>
@mixin flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
}

.box {
    @include flex;
}

.button {
    @include flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
}

.btn-body {
    background-color: #fff;
    padding: 10px 0;
}

.button-text {
    color: #000000;
    font-size: 12px;
}

.uni-media-list-logo {
    width: 180rpx;
    height: 140rpx;
}

.uni-media-list-body {
    height: auto;
    justify-content: space-around;
}

.uni-media-list-text-top {
    height: 74rpx;
    font-size: 28rpx;
    overflow: hidden;
}

.uni-media-list-text-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.button-sp-area {
    margin: 0 auto;
    width: 60%;
}

.button-group {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
}
</style>